<!--
 * @Author: awada 10254500+awadaawada@user.noreply.gitee.com
 * @Date: 2022-10-13 10:49:32
 * @LastEditors: awada 10254500+awadaawada@user.noreply.gitee.com
 * @LastEditTime: 2022-10-15 18:04:12
 * @FilePath: \JavaScriptd:\Briup\实训三\项目\第三个项目\点单项目\HeyTea_project\HeyTea-ui\src\pages\components\bin_chart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container5" />
</template>
<script>
import { Pie } from '@antv/g2plot'
export default {
  mounted() {
    this.getchart5()
  },
  methods: {
    getchart5() {
      const data = [
        { type: '分类一', value: 27 },
        { type: '分类二', value: 25 },
        { type: '分类三', value: 18 },
        { type: '分类四', value: 15 },
        { type: '分类五', value: 10 },
        { type: '其他', value: 5 }
      ]

      const piePlot = new Pie('container5', {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.64,
        meta: {
          value: {
            formatter: (v) => ` ${1856}`
          }
        },
        label: {
          type: 'inner',
          offset: '-50%',
          autoRotate: false,
          style: { textAlign: 'center' },
          formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`
        },
        statistic: {
          title: {
            offsetY: -8
          },
          content: {
            offsetY: -4
          }
        },
        // 添加 中心统计文本 交互
        interactions: [
          { type: 'element-selected' },
          { type: 'element-active' },
          {
            type: 'pie-statistic-active',
            cfg: {
              start: [
                { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
                { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' }
              ],
              end: [
                { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
                { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' }
              ]
            }
          }
        ]
      })

      piePlot.render()
    }
  }
}
</script>
